import React, { useEffect, useState } from 'react'
import { useNavigate, NavigateFunction, To, NavLink } from 'react-router-dom'
import axios from 'axios'

export interface ListItemState {
	id: string
	url: string
	title: string
	desc: string
}

const Index: React.FC = () => {
	const navigate = useNavigate()
	// 数据
	const [list, setList] = useState<ListItemState[]>([])

	// 函数
	const fetchList = async () => {
		const resp = await axios.get('/api/list')
		setList(resp.data.data)
	}

	const toDetail = (item: ListItemState) => {
		// navigate(`/detail/${item.id}/${item.title}`)
		navigate({
			pathname: `/detail/${item.id}/${item.title}`,
			hash: '1231231',
			search: 'code=1&pwd=12345'
		}, {
			state: item,
		})
	}
	// 副作用
	useEffect(() => {
		fetchList()
	}, [])

	return <div>
		<div>
			<NavLink to={{ pathname: '/detail/1231231/1231231', hash: '哈哈哈' }}>去详情</NavLink>
		</div>
		{
			list.length > 0 && list.map(v => {
				return (
					<dl 
						key={ v.id } 
						style={{ border: '1px solid #ccc' }} 
						onClick={ () => toDetail(v) }
					>
						<dt>
							<img src={v.url} alt="" />
						</dt>
						<dd>
							<h3>{ v.title }</h3>
							<p>{ v.desc }</p>
						</dd>
					</dl>
				)
			})
		}
	</div>
}


export default Index